<template>
  <div class="sign-in-subscribe-team">
    <c-title text="我的团队"></c-title>
    <div>
      <p class="settlement">截止到{{deadline}}(结算时间)</p>
      <div class="wrapper">
        <div class="flex ">
          <div class="people m-r20">
            <img class="w90 m-b30" src="../../assets/images/sign_in_subscribe/team/people.png" />
            <span class="count">{{child_num}}</span>
            <span>一代人数</span>
          </div>
          <div>
            <div class="item">
              <img class="w60 h60 m-r20" src="../../assets/images/sign_in_subscribe/team/asset.png" />
              <div>
                <p class="count">{{settle_statistic}}</p>
                <p>一代资产</p>
              </div>
            </div>
            <div class="item">
              <img
                class="w60 h60 m-r20"
                src="../../assets/images/sign_in_subscribe/team/performance.png"
              />
              <div>
                <p class="count">{{stage_performance}}</p>
                <p>总业绩</p>
              </div>
            </div>
            <!-- <div class="item">
              <img
                class="w60 h60 m-r20"
                src="../../assets/images/sign_in_subscribe/team/register.png"
              />
              <div>
                <p class="count">5656</p>
                <p>注册账户树</p>
              </div>
            </div>-->
          </div>
        </div>
        <div class="flex wrap">
          <div class="item m-r20" >
            <img class="w60 h60 m-r20" src="../../assets/images/sign_in_subscribe/team/active.png" />
            <div>
              <p class="count">{{people_num}}</p>
              <p>活跃用户数量</p>
            </div>
          </div>
          <div class="item">
            <img class="w60 h60 m-r20" src="../../assets/images/sign_in_subscribe/team/users.png" />
            <div>
              <p class="count">{{valid_user_num }}</p>
              <p>有效用户数量</p>
            </div>
          </div>
          <div class="item">
            <img class="w60 h60 m-r20" src="../../assets/images/sign_in_subscribe/team/add_up.png" />
            <div>
              <p class="count">{{performance_total}}</p>
              <p>累计业绩</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-if="is_admin == 1">
    <p class="nick-name">{{activity.activity_name}}</p>
    <div class="flex between">
      <div class="item">
        <img class="w60 h60 m-r20" src="../../assets/images/sign_in_subscribe/team/earnings.png" />
        <div>
          <p class="count">{{activity.sign_profit}}</p>
          <p>预约收益</p>
        </div>
      </div>
      <div class="item">
        <img class="w60 h60 m-r20" src="../../assets/images/sign_in_subscribe/team/recommend.png" />
        <div>
          <p class="count">{{activity.recommend_award}}</p>
          <p>推荐奖</p>
        </div>
      </div>
    </div>
    <div class="flex between">
      <div>
        <div class="item">
          <img class="w60 h60 m-r20" src="../../assets/images/sign_in_subscribe/team/award.png" />
          <div>
            <p class="count">{{activity.manage_award}}</p>
            <p>管理奖</p>
          </div>
        </div>
        <div class="item">
          <img
            class="w60 h60 m-r20"
            src="../../assets/images/sign_in_subscribe/team/participation.png"
          />
          <div>
            <p class="count">{{activity.people_num}}</p>
            <p>参与人数</p>
          </div>
        </div>
      </div>
      <div>
        <div class="people">
          <img class="w90 m-b30" src="../../assets/images/sign_in_subscribe/team/mean.png" />
          <span class="count">{{activity.average_num}}</span>
          <span>平均参与量</span>
        </div>
      </div>
    </div>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      deadline: "",
      child_num: 0,
      settle_statistic: 0,
      performance_total: 0,
      stage_performance: 0,
      people_num: 0,
      valid_user_num: 0,
      is_admin: 0,
      activity: {
        activity_name:"",
        sign_profit:0,
        recommend_award:0,
        manage_award:0,
        people_num:0,
        average_num:0
      }
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    async getData() {
      let { data, result, msg } = await $http.get("plugin.sign-buy.frontend.my-team.index");
      if (result == 0) {
        return this.$toast(msg);
      }
      console.log(data);
      this.deadline=data.deadline
      this.child_num=data.child_num
      this.settle_statistic=data.settle_statistic
      this.performance_total=data.performance_total
      this.stage_performance=data.stage_performance
      this.people_num=data.people_num
      this.valid_user_num=data.valid_user_num
      this.is_admin=data.is_admin;
      this.activity = data.activity;
    }
  }
};
</script>

<style lang="scss" scoped>
.sign-in-subscribe-team {
  padding: 0.5625rem 0.625rem;

  .w90 {
    width: 2.8125rem;
  }

  img {
    margin: 0;
  }

  .w60 {
    width: 1.875rem;
  }

  .h60 {
    height: 1.875rem;
  }

  .nick-name {
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.6875rem;
  }

  .m-r20 {
    margin-right: 0.625rem;
  }

  .wrap {
    flex-wrap: wrap;
  }

  .item {
    text-align: left;
    display: flex;
    align-items: center;
    width: 10.7813rem;
    height: 4.375rem;
    background: #fff;
    padding-left: 0.625rem;
    border-radius: 0.3125rem;
    margin-bottom: 0.625rem;
    padding-top: 0.9375rem;
    padding-bottom: 0.9375rem;
  }

  .flex {
    display: flex;
  }

  .people {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 10.7813rem;
    height: 9.375rem;
    background: #fff;
    border-radius: 0.3125rem;
  }

  .between {
    justify-content: space-between;
  }

  .m-b30 {
    margin-bottom: 0.9375rem;
  }

  .count {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.3rem;
  }

  .box {
    display: flex;
    flex-wrap: wrap;
  }

  .box-item:nth-child(2n-1) {
    margin-right: 0.625rem;
  }

  .box-item {
    border-radius: 0.3125rem;
    padding: 0.5rem 3.6rem 1.125rem;
    margin-bottom: 0.625rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }

  .settlement {
    background-color: rgba(242, 220, 220, 1);
    font-size: 0.6875rem;
    padding: 1.125rem 0;
    border-radius: 0.3125rem;
    margin-bottom: 0.6875rem;
  }
}
</style>